<template>
    <Card :bordered='false' dis-hover>
        <Form class="ivu-mb-8"><Button type="primary" @click="handleAdd()">新增</Button></Form>
        <Table :columns="columns" :data="list" :loading="loading" border>
            <template #status="{row}">
                <Badge v-if="row.status === 0" status="success" text="正常" />
                <Badge v-if="row.status === 1" status="processing" text="停用" />
            </template>
            <template #type="{row}">
                <Tag v-if="row.type === 0" color="success">列表</Tag>
                <Tag v-if="row.type === 1" color="primary">单页</Tag>
            </template>
            <template #action="{index}">
                <a @click="handleEdit(index)">字段设置</a>
                <Divider type="vertical"></Divider>
                <a @click="handleEdit(index)">编辑</a>
                <Divider type="vertical"></Divider>
                <a @click="handleDelete(index)" class="delete">删除</a>
            </template>
        </Table>
        <Modal :title="add?'新增':'编辑'" width="960" v-model="Modal" :mask-closable="false" :draggable="true">
            <classify />
        </Modal>
    </Card>
</template>
<script>
import { GetModelList } from '@/api/mock.js'
import classify from '@/components/admin/model'
export default {
    name: 'model',
    components: { classify },
    data() {
        return {
            add: true,
            loading: false,
            total: 0,
            Modal: false,
            current: 1,
            pageOpts: [10, 15, 20, 30, 50],
            params: {
                current: 1,
                pageSize: 10,
            },
            columns: [
                {
                    title: 'id',
                    key: 'id',
                    width: 80
                },
                {
                    title: '名称',
                    key: 'name',
                    minWidth: 150
                },
                {
                    title: '类型',
                    slot: 'type',
                    width: 95
                },
                {
                    title: '首页模板',
                    key: 'list-temp',
                    width: 118
                },
                {
                    title: '列表模板',
                    key: 'list-temp',
                    width: 118
                },
                {
                    title: '详细页模板',
                    key: 'datiled-temp',
                    width: 118
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 80
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 198,
                    fixed: 'right'
                }
            ],
            list: []
        }
    },
    methods: {
        getData() {
            this.loading = true
            GetModelList().then(res => {
                this.list = res
            }).finally(() => {
                this.loading = false
            })
        },
        handleAdd() {
            this.add = true
            this.Modal = true
        },
        handleEdit(e) {
            this.add = false
            this.Modal = true
        },
        handleDelete(e) {
            this.$Modal.confirm({
                title: '温馨提示',
                content: '确定删除此项?',
                onOk: () => {
                    this.list.splice(e, 1)
                    this.$Message.success('删除成功！')
                }
            })
        }
    },
    mounted() {
        this.getData()
    }
}
</script>
<style lang='less' scoped>
.delete {
    color: rgb(226, 5, 5)
}
</style>
